<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云的主要区域</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/header.css">

  <link rel="stylesheet" href="./css/main-area-right.css">
  <style>
    .main > .area {
      display: flex;
      justify-content: space-between;
      border: 1px solid #d3d3d3;
      border-width: 0 1px;
      background-image: url(./images/main_bg.png);
    }

    /* 左侧区域 */
    .main .area-left {
      width: 729px;
      padding: 20px 20px 40px;
    }

    .recommend-section .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 20px 2px;
    }

    .recommend-section .list .item {
      width: 140px;
      margin-bottom: 30px;
    }

    .recommend-section .list .item .top {
      position: relative;
    }

    .recommend-section .list .item .top .cover {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;

      background-image: url(./images/cover_sprite.png);
      background-position: 0 0;
    }

    .recommend-section .list .item .top .info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 27px;
      padding-left: 10px;
      line-height: 27px;

      font-size: 12px;
      color: #ccc;

      background-image: url(./images/cover_sprite.png);
      background-position: 0 -537px;
    }

    .recommend-section .list .item .top .info .icon-music {
      position: relative;
      top: 1px;
    }

    .recommend-section .list .item .top .info .count {
      margin-left: 4px;
    }

    .recommend-section .list .item .top .info .icon-play {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 10px;
      margin: auto 0;
    }

    /* 底部的样式 */
    .recommend-section .list .item .bottom {
      display: block;
      margin-top: 8px;
      font-size: 14px;
    }

    .recommend-section .list .item .bottom:hover {
      text-decoration: underline;
    }

    .recommend-section .list .item .bottom .icon-radio {
      position: relative;
      top: 2px;
    }

    /* 新碟上架 */
    .disc-section .content {
      height: 186px;
      margin: 20px 0;
      box-sizing: border-box;
      border: 1px solid #d3d3d3;
    }

    .disc-section .content .inner {
      position: relative;
      height: 100%;
      box-sizing: border-box;
      padding: 0 25px;
      border: 1px solid #fff;
      background-color: #f5f5f5;
    }

    .disc-section .inner .roller {
      display: flex;
      height: 100%;
      overflow: hidden;
    }

    .disc-section .inner .roller .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding-top: 10px;
      flex-shrink: 0;
    }

    .disc-section .roller .list .item {
      width: 118px;
      height: 150px;
      background: url(./images/main_sprite.png) no-repeat -260px 100px;
    }

    .disc-section .roller .list .item .album {
      position: relative;
    }

    .disc-section .roller .list .item .cover {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: url(./images/cover_sprite.png) no-repeat 0 -570px;
    }

    .disc-section .roller .item .album .play {
      display: none;
      position: absolute;
      right: 10px;
      bottom: 5px;
      width: 22px;
      height: 22px;
      background: url(./images/icon_sprite.png) 0 -85px;
    }

    .disc-section .roller .item .album:hover .play {
      display: block;
    }

    .disc-section .roller .list .item a {
      display: block;
      margin-top: 5px;
      padding-right: 10px;

      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .disc-section .roller .list .item a:hover {
      text-decoration: underline;
    }

    .disc-section .roller .list .item a.title {
      color: #000;
      margin-top: 8px;
    }

    .disc-section .roller .list .item a.anchor {
      color: #666;
    }

    .disc-section .inner .control {
      position: absolute;
      width: 17px;
      height: 17px;
      top: 72px;
      bottom: 0;
      background-image: url(./images/main_sprite.png);
    }

    .disc-section .inner .control-left {
      left: 5px;
      background-position: -260px -75px;
    }

    .disc-section .inner .control-right {
      right: 5px;
      background-position: -320px -75px;
    }
  </style>
</head>
<body>
  
  <div class="main">
    <div class="area wrapper_02">
      <div class="area-left">
        <div class="recommend-section">
          <div class="header_type_02">
            <div class="area_left">
              <h2 class="title">热门推荐</h2>
              <ul class="keywords">
                <li><a class="item" href="#">华语</a></li>
                <li class="line">|</li>
                <li><a class="item" href="#">流行</a></li>
                <li class="line">|</li>
                <li><a class="item" href="#">摇滚</a></li>
                <li class="line">|</li>
                <li><a class="item" href="#">民谣</a></li>
                <li class="line">|</li>
                <li><a class="item" href="#">电子</a></li>
              </ul>
            </div>
            <div class="area_right">
              <a class="more" href="#">更多</a>
            </div>
          </div>
          <div class="list">
            <div class="item">
              <div class="top">
                <img src="./images/recommend_album_01.jpeg" alt="音乐封面">
                <a class="cover" href="#"></a>
                <div class="info">
                  <i class="icon_sprite icon_sprite_music icon-music"></i>
                  <span class="count">62万</span>
                  <i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                </div>
              </div>
              <a class="bottom" href="#">
                天气好的话，把耳机分给我一半吧
              </a>
            </div>
            <div class="item">
              <div class="top">
                <img src="./images/recommend_album_01.jpeg" alt="音乐封面">
                <a class="cover" href="#"></a>
                <div class="info">
                  <i class="icon_sprite icon_sprite_music icon-music"></i>
                  <span class="count">62万</span>
                  <i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                </div>
              </div>
              <a class="bottom" href="#">
                天气好的话，把耳机分给我一半吧
              </a>
            </div>
            <div class="item">
              <div class="top">
                <img src="./images/recommend_album_01.jpeg" alt="音乐封面">
                <a class="cover" href="#"></a>
                <div class="info">
                  <i class="icon_sprite icon_sprite_music icon-music"></i>
                  <span class="count">62万</span>
                  <i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                </div>
              </div>
              <a class="bottom" href="#">
                <i class="iconall_sprite iconall_sprite_radio icon-radio"></i>
                天气好的话，把耳机分给我一半吧
              </a>
            </div>
            <div class="item">
              <div class="top">
                <img src="./images/recommend_album_01.jpeg" alt="音乐封面">
                <a class="cover" href="#"></a>
                <div class="info">
                  <i class="icon_sprite icon_sprite_music icon-music"></i>
                  <span class="count">62万</span>
                  <i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                </div>
              </div>
              <a class="bottom" href="#">
                <i class="iconall_sprite iconall_sprite_radio icon-radio"></i>
                天气好的话，把耳机分给我一半吧
              </a>
            </div>
            <div class="item">
              <div class="top">
                <img src="./images/recommend_album_01.jpeg" alt="音乐封面">
                <a class="cover" href="#"></a>
                <div class="info">
                  <i class="icon_sprite icon_sprite_music icon-music"></i>
                  <span class="count">62万</span>
                  <i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                </div>
              </div>
              <a class="bottom" href="#">
                天气好的话，把耳机分给我一半吧
              </a>
            </div>
            <div class="item">
              <div class="top">
                <img src="./images/recommend_album_01.jpeg" alt="音乐封面">
                <a class="cover" href="#"></a>
                <div class="info">
                  <i class="icon_sprite icon_sprite_music icon-music"></i>
                  <span class="count">62万</span>
                  <i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                </div>
              </div>
              <a class="bottom" href="#">
                <i class="iconall_sprite iconall_sprite_radio icon-radio"></i>
                天气好的话，把耳机分给我一半吧
              </a>
            </div>
            <div class="item">
              <div class="top">
                <img src="./images/recommend_album_01.jpeg" alt="音乐封面">
                <a class="cover" href="#"></a>
                <div class="info">
                  <i class="icon_sprite icon_sprite_music icon-music"></i>
                  <span class="count">62万</span>
                  <i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                </div>
              </div>
              <a class="bottom" href="#">
                天气好的话，把耳机分给我一半吧
              </a>
            </div>
            <div class="item">
              <div class="top">
                <img src="./images/recommend_album_01.jpeg" alt="音乐封面">
                <a class="cover" href="#"></a>
                <div class="info">
                  <i class="icon_sprite icon_sprite_music icon-music"></i>
                  <span class="count">62万</span>
                  <i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                </div>
              </div>
              <a class="bottom" href="#">
                <i class="iconall_sprite iconall_sprite_radio icon-radio"></i>
                天气好的话，把耳机分给我一半吧
              </a>
            </div>
          </div>
        </div>
        <div class="disc-section">
          <div class="header_type_02">
            <div class="area_left">
              <h2 class="title">新碟上架</h2>
            </div>
            <div class="area_right">
              <a class="more" href="#">更多</a>
            </div>
          </div>

          <div class="content">
            <div class="inner">
              <div class="roller">
                <ul class="list">
                  <li class="item">
                    <div class="album">
                      <img src="./images/newdisc_album_01.jpeg" alt="">
                      <a class="cover" href="#"></a>
                      <a class="play" href="#"></a>
                    </div>
                    <a class="title" href="#">原神-佚落迁忘之岛 Islands of the Lost and Forgotten</a>
                    <a class="anchor" href="#">HOYO-MiX</a>
                  </li>
                  <li class="item">
                    <div class="album">
                      <img src="./images/newdisc_album_01.jpeg" alt="">
                      <a class="cover" href="#"></a>
                      <a class="play" href="#"></a>
                    </div>
                    <a class="title" href="#">原神-佚落迁忘之岛 Islands of the Lost and Forgotten</a>
                    <a class="anchor" href="#">HOYO-MiX</a>
                  </li>
                  <li class="item">
                    <div class="album">
                      <img src="./images/newdisc_album_01.jpeg" alt="">
                      <a class="cover" href="#"></a>
                      <a class="play" href="#"></a>
                    </div>
                    <a class="title" href="#">原神-佚落迁忘之岛 Islands of the Lost and Forgotten</a>
                    <a class="anchor" href="#">HOYO-MiX</a>
                  </li>
                  <li class="item">
                    <div class="album">
                      <img src="./images/newdisc_album_01.jpeg" alt="">
                      <a class="cover" href="#"></a>
                      <a class="play" href="#"></a>
                    </div>
                    <a class="title" href="#">原神-佚落迁忘之岛 Islands of the Lost and Forgotten</a>
                    <a class="anchor" href="#">HOYO-MiX</a>
                  </li>
                  <li class="item">
                    <div class="album">
                      <img src="./images/newdisc_album_01.jpeg" alt="">
                      <a class="cover" href="#"></a>
                      <a class="play" href="#"></a>
                    </div>
                    <a class="title" href="#">原神-佚落迁忘之岛 Islands of the Lost and Forgotten</a>
                    <a class="anchor" href="#">HOYO-MiX</a>
                  </li>
                </ul>
                <ul class="list">2</ul>
              </div>
              <a class="control control-left" href="#"></a>
              <a class="control control-right" href="#"></a>
            </div>
          </div>

        </div>
        <div class="rank-section">
          <div class="header_type_02">
            <div class="area_left">
              <h2 class="title">榜单</h2>
            </div>
            <div class="area_right">
              <a class="more" href="#">更多</a>
            </div>
          </div>
        </div>
      </div>
      <div class="area-right">
        <div class="user-login">
          <p class="desc">
            登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
          </p>
          <a class="btn" href="#">用户登录</a>
        </div>
        <div class="settle-singer">
          <div class="header_type_01">
            <h3 class="title">入驻歌手</h3>
            <a class="more" href="#">查看全部 &gt;</a>
          </div>
          <ul class="list">
            <li>
              <a class="item" href="#">
                <div class="album">
                  <img src="./images/singer_01.jpeg" alt="">
                </div>
                <div class="info">
                  <div class="singer">张惠妹aMEI</div>
                  <div class="desc">台湾歌手张惠妹发发到付发发</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item" href="#">
                <div class="album">
                  <img src="./images/singer_01.jpeg" alt="">
                </div>
                <div class="info">
                  <div class="singer">张惠妹aMEI</div>
                  <div class="desc">台湾歌手张惠妹</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item" href="#">
                <div class="album">
                  <img src="./images/singer_01.jpeg" alt="">
                </div>
                <div class="info">
                  <div class="singer">张惠妹aMEI</div>
                  <div class="desc">台湾歌手张惠妹</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item" href="#">
                <div class="album">
                  <img src="./images/singer_01.jpeg" alt="">
                </div>
                <div class="info">
                  <div class="singer">张惠妹aMEI</div>
                  <div class="desc">台湾歌手张惠妹</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item" href="#">
                <div class="album">
                  <img src="./images/singer_01.jpeg" alt="">
                </div>
                <div class="info">
                  <div class="singer">张惠妹aMEI</div>
                  <div class="desc">台湾歌手张惠妹</div>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div class="hot-anchor">
          <div class="header_type_01">
            <h3 class="title">热门主播</h3>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>